<template>
<div>
  <div class="jg_item1" v-for="i,k in list" :key="k" @click="toDetail(i)">
    <div class="flex">
      <img class="chain_logo" :src="i.img||'https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/1726132616782.jpg'" mode="aspectFill"></img>
      <div class="chain_name">{{i.chain_name}}</div>
    </div>
    
    <div class="flex_w" v-if="i.main_chain?.length">
      <div class="chain_label" :class="k1==1?'color1':k1==2?'color2':''" v-for="chain,k1 in i.main_chain" :key="chain.id">
        {{ chain.chain_name }}
      </div>
    </div>
    
    <div class="chain_desc">
      {{i?.desc||'-'}}
    </div>
    <div class="flex_sb com_num" @click.stop="toComList(i)">
      <div class="com_text" style="color: #000;">相关企业：{{i.company_num}}家</div>
      <div class="com_text">立即查看></div>
    </div>
  </div>
</div>
</template>
<script>
export default {
  props: {
    list: {
      default:[]
    }
  },
  data() {
    return {
      
    }
  },
  methods:{
    toDetail(i){
      this.$router.push({name:'chainDetail',query:{id:i.id}})
    },
    toComList(i) {
      sessionStorage.com_chain = JSON.stringify(i)
      this.$router.push('companyList')
    },
  }
}
</script>
<style scoped lang='scss'>
.jg_item1{
  margin: 10px;
	background: #FFFFFF;
	border-radius: 3px;
	padding: 10px;
}
.chain_logo{
	height: 20px;
	width: 20px;
	margin-right: 10px;
}
.chain_name{
	font-size: 16px;
	color: #000000;
}
.chain_desc{
	font-size: 12px;
	color: #333333;
	margin: 10px 0;
}
.com_num{
	height: 30px;
	background: rgba(19,138,242,0.06);
	border-radius: 5px;
	line-height: 30px;
	font-size: 12px;
	color: #138AF2;
	padding: 0 10px;
}
.chain_label{
	height: 17px;
	line-height: 17px;
	padding: 0 7px;
	background: rgba(19,138,242,0.1);
	border-radius: 3px;
	margin-top: 10px;
	font-size: 10px;
	color: #138AF2;
	margin-right: 10px;
}
.color1{
	background: rgba(48,149,59,0.1);
	color: #2F953A;
}
.color2{
	color: #EB7418;
	background: rgba(235,116,24,0.1);
}

</style>